<template>
    <div id="ArticleLeft">
            <div class='leftTitle'>
                <h1>{{Artice.title}}</h1>
                <div class='span'><p>{{Artice.label}}</p><span></span></div>
                <hr style="margin-top: 10px;margin-bottom: 10px;">   
            </div>
            <div class='main'> 
                 <div v-html="Artice.detailText" > </div>
            </div>
            <div class="articletime">
                <p>更新发布于{{Artice.tTime |time}}</p>
            </div>
            <div class="articleicon">
                <div ref="dianzan" class="articleicon1" @click="like1()" v-if="none1">点赞{{Artice.likeCilck}}</div>
                <div ref="dianzan" class="articleicon1s" @click="like1()" v-if="!none1">已点赞</div>
                <div class="articleicon2" @click="like2()" v-if="none2">收藏{{Artice.collect}}</div>
                <div class="articleicon2s" @click="like2()" v-if="!none2">已收藏</div>
                <div class="articleicon3">
                    分享
                    <svg t="1600085557732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5413" width="22" height="22"><path d="M755.34336 443.79136a191.488 191.488 0 1 0-188.81536-157.47072L397.27616 357.32992a179.7376 179.7376 0 1 0-34.2528 267.93984l150.9376 106.22976a159.0528 159.0528 0 0 0-11.87328 60.2368 161.32096 161.32096 0 1 0 56.832-122.19904l-142.39232-100.23424a178.82112 178.82112 0 0 0 18.432-144.79872L594.944 357.376a192 192 0 0 0 160.39936 86.41536zM158.66368 476.29312a103.6032 103.6032 0 1 1 103.6032 103.23456 103.53664 103.53664 0 0 1-103.6032-103.23456z m504.58624 231.3216a84.1216 84.1216 0 1 1-84.41856 84.1216 84.36736 84.36736 0 0 1 84.41856-84.1216z m92.09344-569.7024a114.688 114.688 0 1 1-115.11808 114.688 115.03616 115.03616 0 0 1 115.11808-114.688z" fill="#707070" p-id="5414"></path></svg>
                </div>
            </div>
            <div class="side">
            <p>{{Artice.likeCilck}}</p>
            <li v-if="none1" @click="like1()">
                <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="32" height="32"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#707070" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#707070" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#707070" p-id="6439"></path></svg>
            </li>
            <li v-if="!none1" @click="like1()" style="background-color:rgb(1, 147, 230)">
                <svg t="1603287263383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6412" width="32" height="32"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#ffffff" p-id="6413"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#ffffff" p-id="6414"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#ffffff" p-id="6415"></path></svg>
            </li>
            <a href="#pinlun"><li>
                <svg t="1600085519251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4446" width="22" height="22"><path d="M289.013833 389.741547c-30.743156 0-55.704033 25.857868-55.704033 57.785222 0 31.906767 24.961076 57.764236 55.704033 57.764236 30.788126 0 55.704632-25.857469 55.704632-57.764236C344.718265 415.599416 319.801758 389.741547 289.013833 389.741547L289.013833 389.741547 289.013833 389.741547zM511.832162 389.741547c-30.783129 0-55.704632 25.857868-55.704632 57.785222 0 31.906767 24.921503 57.764236 55.704632 57.764236 30.743156 0 55.66306-25.857469 55.66306-57.764236C567.495222 415.599416 542.575118 389.741547 511.832162 389.741547L511.832162 389.741547 511.832162 389.741547zM734.610518 389.741547c-30.742956 0-55.707031 25.857868-55.707031 57.785222 0 31.906767 24.964074 57.764236 55.707031 57.764236 30.73816 0 55.702234-25.857469 55.702234-57.764236C790.312552 415.599416 765.348678 389.741547 734.610518 389.741547L734.610518 389.741547 734.610518 389.741547zM846.014786 128.488877 177.647539 128.488877c-61.528684 0-111.406666 51.748315-111.406666 115.572442l0 378.055678c0 63.803541 50.972241 122.622662 113.903973 122.622662l169.785485 0c29.562357 31.527624 152.047512 145.002288 152.047512 145.002288 5.434316 5.669156 14.235348 5.669156 19.663668 0 0 0 89.686992-88.341904 148.107183-145.002288l173.728612 0c62.934131 0 113.906571-58.818921 113.906571-122.622662l0-378.055678C957.383878 180.237191 907.500898 128.488877 846.014786 128.488877L846.014786 128.488877 846.014786 128.488877zM901.676847 622.116997c0 31.896374-26.752662 65.382471-58.199341 65.382471l-170.837772 0c-20.713956 0-39.323339 21.257587-39.323339 21.257587l-119.950474 111.137249-119.948275-111.137249c0 0-22.815931-21.257587-42.390659-21.257587l-170.882142 0c-31.444681 0-58.201939-33.486096-58.201939-65.382471l0-378.055678c0-31.926754 24.919105-57.779625 55.704632-57.779625l668.367247 0c30.747953 0 55.662061 25.852872 55.662061 57.779625L901.676847 622.116997 901.676847 622.116997 901.676847 622.116997z" p-id="4447" fill="#707070"></path></svg>
            </li></a>
            <li>
                <svg t="1600085557732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5413" width="22" height="22"><path d="M755.34336 443.79136a191.488 191.488 0 1 0-188.81536-157.47072L397.27616 357.32992a179.7376 179.7376 0 1 0-34.2528 267.93984l150.9376 106.22976a159.0528 159.0528 0 0 0-11.87328 60.2368 161.32096 161.32096 0 1 0 56.832-122.19904l-142.39232-100.23424a178.82112 178.82112 0 0 0 18.432-144.79872L594.944 357.376a192 192 0 0 0 160.39936 86.41536zM158.66368 476.29312a103.6032 103.6032 0 1 1 103.6032 103.23456 103.53664 103.53664 0 0 1-103.6032-103.23456z m504.58624 231.3216a84.1216 84.1216 0 1 1-84.41856 84.1216 84.36736 84.36736 0 0 1 84.41856-84.1216z m92.09344-569.7024a114.688 114.688 0 1 1-115.11808 114.688 115.03616 115.03616 0 0 1 115.11808-114.688z" fill="#707070" p-id="5414"></path></svg>
                
            </li>
    </div>
    </div>
</template>
<script>
import $ from "jquery"
export default {
    data(){
        return {
             aid: '',
             Artice:'',
             none1:true,
             none2:true,
             none1flag:1,
             none2flag:1,
             ownuids:''
            }
    },
    created(){
      this.aid=this.$route.query.aid
      this.ownuids=this.$store.state.ownUid
      
    //判定是否点赞
      this.$axios.get('/api/article/alikes',{params:{tid:this.aid,uid:this.ownuids}})
        .then(res=>{
            // console.log(res.data.data.length)
            if(res.data.data.length){
                this.none1=false
                this.none1flag=0
            }
        })
        .catch(err=>{
          console.log('err:',err)
        })
    //判定是否收藏
    this.$axios.get('/api/article/acollection',{params:{tid:this.aid,uid:this.ownuids}})
        .then(res=>{
            console.log('收藏',res)
            if(res.data.data.length){
                this.none2=false
                this.none2flag=0
            }
        })
        .catch(err=>{
          console.log('err:',err)
        })
    //   console.log(this.aid)
      this.$axios.get('/api/article/article',{params:{aid:this.aid}})
        .then(res=>{
            // console.log('res:',res.data.data[0])
            this.Artice=res.data.data[0]
            console.log('content',this.Artice)
            this.$eventBus.$emit('Article_uid',this.Artice.uId)
        })
        .catch(err=>{
          console.log('err:',err)
        })
    },
    filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break 
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
    },
    methods: {
      like1(){
        if(this.none1flag){
          this.Artice.likeCilck+=1
          this.none1flag=0
          this.$message({
                                        showClose: true,
                                        message: '点赞成功',
                                        type: 'success'});
          //点赞
          this.$axios.get('/api/article/addFabulous',{params:{tid:this.aid}})
            .then(res=>{
              })
            .catch(err=>{
              console.log('err:',err)
            })
          //保存点赞记录
          this.$axios.get('/api/article/addlikes',{params:{tid:this.aid,uid:this.ownuids}})
            .then(res=>{ 
            })
            .catch(err=>{
              console.log('err:',err)
            })
          
        }
        else{
          this.Artice.likeCilck-=1
          this.none1flag=1
          this.$message({
                                        showClose: true,
                                        message: '取消点赞',
                                        type: 'success'});
          //取消点赞
          this.$axios.get('/api/article/delFabulous',{params:{tid:this.aid}})
            .then(res=>{
              })
            .catch(err=>{
              console.log('err:',err)
            })
          //删除点赞记录
           this.$axios.get('/api/article/dellikes',{params:{tid:this.aid,uid:this.ownuids}})
            .then(res=>{
                
            })
            .catch(err=>{
              console.log('err:',err)
            })
          
          
        }
          this.none1=!this.none1
      },
      like2(){
        if(this.none2flag){
          //收藏数加
          this.$axios.get('/api/article/addcs',{params:{tid:this.aid}})
            .then(res=>{
              })
            .catch(err=>{
              console.log('err:',err)
            })
          //保存收藏记录
          this.$axios.get('/api/article/addcollection',{params:{tid:this.aid,uid:this.ownuids}})
            .then(res=>{ 
            })
            .catch(err=>{
              console.log('err:',err)
            })
          this.none2flag=0
        }
        else{
          //收藏数减
          this.$axios.get('/api/article/delcs',{params:{tid:this.aid}})
            .then(res=>{
              })
            .catch(err=>{
              console.log('err:',err)
            })
          //删除收藏记录
          this.$axios.get('/api/article/delcollection',{params:{tid:this.aid,uid:this.ownuids}})
            .then(res=>{ 
            })
            .catch(err=>{
              console.log('err:',err)
            })
          this.none2flag=1
        }
          this.none2=!this.none2
      }
    },
}
</script>

